<template>
    <div>
        <BreadList :list="['Home', 'Content', { 'name': 'Blog' }, 'Read']"></BreadList>
        <a-card>
            <h2 class="text-center">{{ blogForm.blogTitle }}</h2>
            <div id="header" class="text-center">
                <!-- header 从 userId 获取 -->
                <a-avatar :src="blogForm.blogImage" />&nbsp;
                <!-- <a-tag color="#234" v-if="blogDetail.userId === '1433223'">管理员</a-tag> -->
                <!-- <a-tag color="#8BC6EC">{{ blogForm. }}</a-tag> -->
                <span class="date"> 发布于：{{ blogForm.createdTime }} </span>
                <span class="date"> 更新于：{{ blogForm.updateTime }} </span>
            </div>
            <md-editor-v3 v-model="blogForm.blogContent" previewOnly />
        </a-card>
    </div>
</template>

<script setup lang="ts">
import { useRoute, useRouter } from 'vue-router';
import { reactive, ref, onMounted, toRaw } from 'vue';
import { getBlogDetail } from '@/api/Content';

const route = useRoute();
const router = useRouter();

const blogForm = ref({
    blogTitle: "",
    blogImage: "",
    blogDescription: "",
    blogContent: "",
    blogSource: "",
    blogRead: 0,
    createdTime: "",
    updateTime: "",
    userId: "",
});

onMounted(() => {
    const blogId = route.query.blogId as unknown as string;
    if (blogId !== undefined) {
        getBlogById(blogId);
    }
});

const getBlogById = async (id: string) => {
    const { data } = await getBlogDetail(id);
    blogForm.value = data;
};

</script>

<style scoped>
.text-center {
    text-align: center;
}
</style>